<template>
  <div>
    <!--  顶部查询区域-->
    <div class="search-box">
      <a-form :form="form" @submit="handleSearch" :layout="formLayout">
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="商品SPU编号">
          <a-input
              v-decorator="[ 'id', {rules: [{ required: false, message: '请输入', }, ], },]" placeholder="请输入商品SPU编号"
          />
        </a-form-item>
        <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="商品名称">
          <a-input
              v-decorator="[ 'name', {rules: [{ required: false, message: '请输入', }, ], },]" placeholder="请输入商品名称"
          />
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="上下架">
          <a-select
              mode="default"
              style="width: 200px"
              v-decorator="[
                  'hidden',
                  { initialValue:'' },
                  ]"
          >
            <a-select-option v-for="item in statusEnum" :key="item.key" :value="item.key">
              {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="虚拟商品">
          <a-select
              mode="default"
              style="width: 200px"
              v-decorator="[
                  'isVirtual',
                  { initialValue:'' },
                  ]"
          >
            <a-select-option v-for="item in isVirtualEnum" :key="item.key" :value="item.key">
              {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="商品类型">
          <a-select
              mode="default"
              style="width: 200px"
              v-decorator="[
                  'type',
                  { initialValue:'' },
                  ]"
          >
            <a-select-option v-for="item in SpuTypeOptions" :key="item.key" :value="item.key">
              {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="后台类目">
          <a-select
              mode="default"
              style="width: 200px"
              v-decorator="[
                  'categoryId',
                  { initialValue:'' },
                  ]"
          >
            <a-select-option v-for="item in SpuTypeOptions" :key="item.key" :value="item.key">
              {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            class="q-form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="品牌">
          <a-select
              mode="default"
              style="width: 200px"
              v-decorator="[
                  'brandId',
                  { initialValue:'' },
                  ]"
          >
            <a-select-option v-for="item in brandListName" :key="item.key" :value="item.key">
              {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-row>
          <a-form-item :wrapper-col="buttonItemLayout.wrapperCol" class="q-form-item">
            <a-button html-type="submit" class="q-btn">
              查询
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
              重置
            </a-button>
          </a-form-item>
        </a-row>
      </a-form>
    </div>
    <!--  卡片区域-->
    <div class="card-box">
      <a-card :bordered="true">
        <a-button class="editable-add-btn" @click="$router.push('/shop/shop-add')">
          添加商品
        </a-button>
        <a-pagination
            class="pagination-box"
            v-model="q.pageNo"
            :page-size-options="pageSizeOptions"
            :total="total"
            :show-total="() => `共 ${total} 条`"
            show-size-changer
            :page-size="q.pageSize"
            @change="onChange"
            @showSizeChange="onShowSizeChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span>{{ props.value }}条/页</span>
          </template>
        </a-pagination>
        <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false" :scroll="{ x:'100%' }">
          <template slot="name" slot-scope="text, record" >
            <div class="img-name">
              <img class="show-img" :src="record.mainImage" alt="">
              <span class="name">{{record.name}}</span>
            </div>
          </template>
          <template slot="operation" slot-scope="text, record">
            <a-button class="edit-btn" type="link" size="small" @click="$router.push({path:`/shop/shop-edit?id=${record.id}`})">编辑</a-button>
            <a-button class="edit-btn" type="link" size="small">复制</a-button>
            <a-button class="del-btn" type="link" size="small" @click="delUnit(record.id)">删除</a-button>
            <a-button class="del-btn" type="link" size="small">修改评论数</a-button>
            <a-button class="del-btn" type="link" size="small">复制商品链接</a-button>
          </template>
        </a-table>
      </a-card>
    </div>
    <!--  弹窗区域-->
  </div>
</template>

<script>
import {getSpuPage,getBrandList,deleteProduct} from '@/api'
import {SpuTypeEnum,SpuTypeOptions} from "@/common/constant";
export default {
  name: "unit",
  data() {
    return {

      SpuTypeOptions,
      statusEnum:[
        {
          key:"0",
          label:'上架'
        },
        {
          key:"1",
          label:'下架'
        },
        {
          key:'',
          label:'全部'
        },
      ],
      isVirtualEnum:[
        {
          key:"0",
          label:'非虚拟商品'
        },
        {
          key:"1",
          label:'虚拟商品'
        },
        {
          key:'',
          label:'全部'
        },
      ],
      brandListName:[],
      size: 'default',
      visible: false,
      isEdit:false,
      checkNick: false,
      form:this.$form.createForm(this),
      unit: {
        name:'',
        options:[]
      },
      pageSizeOptions: ['20','50','100'],
      total: 1,
      q:{
        pageSize:20,
        pageNo:1,
      },
      formLayout: 'inline',
      dataSource: [], //表格的数据源
      columns: [
        {
          title: 'SPU编号',
          dataIndex: 'id',
          width: 150,
          align:'center',
          scopedSlots: { customRender: 'id' },
        },
        {
          title: '商品信息',
          dataIndex: 'name',
          width: 300,
          align:'left',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '商品类型',
          dataIndex: 'type',
          width: 100,
          align:'center',
        },
        {
          title: '销售价',
          dataIndex: 'minPrice',
          width: 100,
          align:'center',
        },
        {
          title: '销量',
          dataIndex: 'sales',
          width: 100,
          align:'center',
        },
        {
          title: '运费模板',
          dataIndex: 'freightName',
          width: 300,
          align:'center',
        },
        {
          title: '上下架',
          dataIndex: 'hidden',
          width: 100,
          align:'center',
        },
        {
          title: '排序',
          dataIndex: 'sorts',
          width: 100,
          align:'center',
        },
        {
          title: '标签',
          dataIndex: 'tagList',
          width: 100,
          align:'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          width: 200,
          align:'center',
        },
        {
          title: '更新时间',
          dataIndex: 'updatedAt',
          width: 200,
          align:'center',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 250,
          align:'center',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    };
  },
  computed: {
    formItemLayout() {
      const { formLayout } = this;
      return formLayout === 'horizontal'
          ? {
            labelCol: { span: 3 },
            wrapperCol: { span: 9 },
          }
          : {};
    },
    buttonItemLayout() {
      const { formLayout } = this;
      return formLayout === 'horizontal'
          ? {
            wrapperCol: { span: 14, offset: 4 },
          }
          : {};
    },
  },
  methods: {
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
    //查询
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields(async (error, values) => {
        this.q.id=values.id
        this.q.name=values.name
        this.getSpuPageFn()
      });
    },
    //重置
    handleReset() {
      this.form.resetFields();
      this.q.pageNo=1
      this.q.id=null
      this.q.name=null
      this.getSpuPageFn()
    },
    //页码发生变化的回调
    onChange(current) {
      this.q.pageNo = current
      this.getSpuPageFn()
    },
    onShowSizeChange(current, pageSize) {
      this.q.pageNo = current
      this.q.pageSize=pageSize
      this.getSpuPageFn()
    },

    //编辑

    //删除
    delUnit(id){
      this.$confirm({
        title: '提示',
        content: '确定要永久删除这条数据吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async ()=> {
          if(this.total-(this.q.pageNo-1)*this.q.pageSize===1){
            this.q.pageNo--
            if(this.q.pageNo===0){
              this.q.pageNo=1
            }}
          await deleteProduct(id)
          this.getSpuPageFn()
        },
        onCancel:()=> {},
      });
    },
    //获取品牌列表
async getBrandListFn(){
      const res=await getBrandList()
  this.brandListName=[...res.value.map(item=>{
    return {
      key: item.id,
      label: item.name
    }}),{
        key:'',
        label:'全部'
  }]
},
    //获取单位分页
    async getSpuPageFn(){
      const res=await getSpuPage(this.q)
      this.dataSource=res.value.data.map(item=>{
        item.type=SpuTypeEnum[item.type]
        item.hidden=item.hidden===0 ? '销售中':'已下架'
        item.minPrice=`￥${item.minPrice}`
        return item
      })
      this.q.pageSize=res.value.pageSize
      this.q.pageNo=res.value.pageNo
      this.total=res.value.total
    }
  },
  mounted(){
    this.getSpuPageFn()
    this.getBrandListFn()
  }
};

</script>

<style scoped lang="less">
.search-box{
  margin-bottom: 50px;
  .btn-search{
    background-color: #010101;
    color: white;
    margin-right: 20px;
  }
}
.editable-add-btn{
  margin-bottom: 30px;
  background-color: #010101;
  color: white;
}
.pagination-box{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.q-form{
  //margin-right: 70px;
}
.q-form-item{
  margin-left: 68px;
  margin-top: 20px;
}
.q-btn{
  background-color: #010101;
  color: white;
}
.edit-btn{
  color: black;
}
.del-btn{
  color: black;
}
.img-name{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.show-img{
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

</style>

